<template>
    <view class="rate flex">
        <view class="item" v-for="item in rateList" :key="item.id" @click="change(item)">
            <image class="icon_samll fs0 bd-r50c" v-if="item.isTrue"
                src="https://cdn.oss.bon-top.cn/static_bc/images/xing_black.png" mode="aspectFit" />
            <image class="icon_samll fs0 bd-r50c" v-else src="https://cdn.oss.bon-top.cn/static_bc/images/xing_gray.png"
                mode="aspectFit" />
        </view>
        <span class="num ft-24 fw-400 c-33" v-if="!noVal">{{ numVal }}%</span>
    </view>

</template>

<script setup lang="js">
import { computed, onMounted, reactive, ref } from 'vue';
let emit = defineEmits(['change'])
let { num, disabled, noVal } = defineProps({
    num: {
        type: Number,
        default: () => { 0 }
    },
    disabled: {
        type: Number,
        default: () => { false },
        
    },
    noVal: {
        type: Boolean,
        default: () => { false }
    },
})

const rateList = ref([])
const numVal = ref(0)
const change = (item) => {
    if (disabled) return
    let _num = 0
    rateList.value.forEach(f => {
        f.isTrue = f.id <= item.id
    })
    _num = rateList.value.filter(f => f.isTrue)?.length || 0
    console.log('_num', _num)
    numVal.value = (_num / 5) * 100
    let data = {
        activeCount: _num,
        num: numVal.value
    }
    emit('change', data)

}

onMounted(() => {
    for (let i = 0; i < 5; i++) {
        console.log('Number(num)', num)
        rateList.value.push({
            id: i,
            isTrue: i < (Number(num) ?? 0) ? true : false
        })
    }
    numVal.value = ((Number(num) ?? 0) / 5) * 100
})

</script>

<style lang="scss" scoped>
.rate {
    .item {
        margin-right: 2rpx;
    }

    .num {
        margin-left: 4rpx;
    }
}
</style>